<template>
  <div class="upload">
    <el-row>
      <el-col style="margin-left: 20px">
        <h3>选择目录</h3>
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
          <el-form-item label="供应商">
            <el-select v-model="formInline.selected_supplier" v-loading="formInline.supplier_loading" placeholder="请选择供应商" size="small" @change="handleSupplierChange">
              <el-option v-for="item in formInline.suppliers" :key="item.id" :label="item.name" :value="item.id" />
            </el-select>
          </el-form-item>

          <el-form-item v-loading="formInline.catalog_loading" label="目录" style="padding-left: 10px;">
            <el-cascader v-model="formInline.selected_catalog" change-on-select :options="formInline.catalogs" placeholder="请选择目录" :props="formInline.catalog_props" :disabled="formInline.catalog_available" size="small" @change="handleCatalogChange" />
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
    <div id="line" />
    <el-row>
      <el-col style="margin-left: 20px">
        <h3>上传文件</h3>
        <div>
          <el-upload :action="upload_url" list-type="picture-card" :on-preview="handlePictureCardPreview" :on-remove="handleRemove" multiple drag :disabled="upload_available">
            <i class="el-icon-plus" />
          </el-upload>
          <el-dialog :visible.sync="dialog.visible" :title="dialog.title" :center="true">
            <img width="100%" :src="dialog.imageUrl" alt="">
          </el-dialog>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { Get as getSupplier } from '@/api/erp/elicink/supplier'
import { GetTree } from '@/api/erp/elicink/supplier'

export default {
  data() {
    return {
      dialog: {
        imageUrl: '',
        visible: false,
        title: ''
      },
      upload_available: true, // true 禁用
      upload_url: '',
      formInline: {
        // 目录
        catalog_available: true, // true 禁用
        catalog_loading: false, // true 加载
        selected_catalog: [],
        catalog_props: {
          value: 'id',
          label: 'name'
        },
        catalogs: [],

        // 供应商
        supplier_loading: true,
        selected_supplier: '',
        suppliers: []
      }
    }
  },
  created() {
    this.fetchSupplier()
  },
  methods: {
    handleRemove(file, fileList) {
      console.log(file, fileList)
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url
      this.dialogVisible = true
      this.title = file.name
    },
    // 处理目录更改
    handleCatalogChange(value) {
      console.log(222, value)
      this.upload_available = false
      this.upload_url = ['http://192.168.3.12:5000/erp/api/product/', value[value.length - 1]].join('')
    },
    // 处理供应商更改
    handleSupplierChange(value) {
      if (this.formInline.catalogs.length === 0) {
        this.getCatalogs(value)
        this.formInline.catalog_loading = true
      }
    },
    // 获取供应商
    fetchSupplier() {
      getSupplier().then(response => {
        this.formInline.suppliers = response.data.data
        this.formInline.supplier_loading = false
      }).catch(err => {
        console.log(err)
        this.formInline.supplier_loading = false
      })
    },
    // 获取目录
    getCatalogs(v) {
      GetTree(v).then(response => {
        this.formInline.catalog_available = true
        this.formInline.catalogs = response.data
        this.formInline.catalog_available = response.data.length < 0
        this.formInline.catalog_loading = false
      }).catch(err => {
        console.log(err)
        this.formInline.catalog_loading = false
      })
    }
  }
}
</script>

<style scoped>
#line {
  height: 2px;
  background-color: #d3d3d3;
  display: inline-block;
  width: 100%;
  margin-top: 40px;
  margin-bottom: 40px;
}

h3 {
  font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑",
    Arial, sans-serif;
}

.upload >>>
  .el-input__inner {
    min-width: 300px;
}
.upload >>>
.el-cascader.is-disabled {
    min-width: 1100px;
}

</style>
